<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可编辑表格</title>
    <style>
      table,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        width: 150px;
        height: 40px;
        text-align: center;
      }

      input {
        border: 0;
        outline: none;
        width: 100px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id="data">111</td>
      </tr>
    </table>

    <script>
      /* 注意: 箭头函数中的this指代的是window对象而非事件源对象,而正常函数中的this指代事件源对象 */
      //data.addEventListener('click', () => console.log(this))

      function editTd() {
        //console.log(this)
        //解除td的点击事件
        //this.onclick = ''
        this.removeEventListener('click', editTd)
        //获取单元格中的数据
        let tdData = data.innerHTML
        //清空单元格
        data.innerHTML = ''
        //创建一个新的文本框
        const input = document.createElement('input')
        //设置文本框的属性类型
        //input.setAttribute('type', 'text')
        //把原td中的数据设置到文本框中
        input.value = tdData
        //把文本框添加到单元格中
        this.appendChild(input)
        //选中文本框中的值
        input.select()

        //给文本框绑定键盘事件
        input.addEventListener('keyup', function () {
          if (event.keyCode == 13) {
            //回车
            //把文本框中的值显示回单元格
            data.innerHTML = this.value
          } else if (event.keyCode == 27) {
            //esc
            data.innerHTML = tdData
          }
          //恢复td的点击事件
          data.addEventListener('click', editTd)
        })
      }
      //给td绑定点击事件
      data.addEventListener('click', editTd)
    </script>
  </body>
</html>
